<div class="modal fade bs-modal-md" id="modelContent">
	<div class="modal-dialog modal-md">
        <div class="modal-content" style="width:825px;"></div>
    </div>
</div> 
<div class="portlet box green">
    <div class="portlet-title">
		<div class="caption"><i class="fa fa-cogs"></i>数据列表</div>
		<div class="tools"><a href="javascript:;" class="collapse" data-original-title="" title=""> </a></div>
		<div class="actions"><a href="#modelContent" thref="/attr/add" class="btn white btn-sm ajax-model-get" data-toggle="modal"><i class="fa fa-plus"></i> 新增 </a></div>
    </div>
    <div class="portlet-body">
    	<div class="dataTables_wrapper no-footer">
			<div class="table-scrollable">
	        <table class="table table-striped table-bordered table-hover">
	            <thead>
	                <tr>
	                    <th> 规格名称 </th>
	                    <th> 规格值名称 </th>
	                    <th> 创建时间</th>
	                    <th class="col-md-2"> 操作 </th>
	                </tr>
	            </thead>
	            <tbody>
	                 #foreach ($item in $!pageAttr.result)
	                 #set($attrValueList = $!mapAttrValue.get($item))
	                 <tr>
	                     <td>$!item.name ($!item.meno) </td>
	                     <td> 
	                     #foreach($itemValue in $attrValueList)
	                     <span>$itemValue.name;</span>
	                     #end
	                     </td>
	                     <td>$!item.createDate</td>
	                     <td>
	                        <a href="#modelContent" class="btn green btn-outline btn-sm ajax-model-get  " code="attr.edit" data-toggle="modal" thref="/attr/edit.do?id=$item.id&$!queryReturn">
								<i class="fa fa-edit"></i>
								修改
							</a>
							<a class="btn green btn-outline btn-sm  btn-sm ajax-delete"  href="javascript:;" thref="/attr/delete.do?id=$item.id">
								<i class="fa fa-trash"></i>
								删除
							</a>
	                     </td>
	                 </tr>
	                 #end
	            </tbody>
	        </table>
		</div>
		#set($page=$pageAttr)
		#set($pageUrl="/attr/list?$!queryString&pageNo=")
		#parse("_page.htm")
		</div>
	</div>
</div>
<table class="hiddenTable" style="display: none;">
	<tr>
        <td>
        	<input type="text" class="form-control" name="attrValue.name"  maxlength="20" required>
        </td>
           <td>
	 		<input type="text" class="form-control" name="sort">
	    </td>
        <td>
			<a class="btn green btn-outline btn-sm" onclick="addValue()">
				<i class="fa fa-plus"></i> 增加
			</a>
			<a class="btn green btn-outline btn-sm" data-attrValueId="" onclick="delValue(this)">
				<i class="fa fa-trash"></i> 删除
			</a>
        </td>
	</tr>
</table>
<script type="text/javascript" src="/assets/scripts/views-permission.js"></script>
<script type="text/javascript">
	function addValue(){
		$(".hiddenTable tbody tr").clone().appendTo($("#attrValueTable tbody"));
		var e = $("#attrValueTable tbody tr:last-child")
		e.find("input[name='sort']").addClass("integerNum");
		MyTouchSpin.init()
	}
	function delValue(obj){
		var attrValueId = $(obj).attr("data-attrValueId");
		if(attrValueId == ""){
			$(obj).parents("tr").remove();
			return
		}else{
			$.ajax({
				url: "/attr/deleteValue",
				type: "get",
				data: {"attrValueId": attrValueId},
				dataType: "json",
				success: function(res){
					if(res.code == 0 ){
						$(obj).parents("tr").remove();
					}else{
						toastr.warning(res.msg);
					}
				},
				error: function (xhr, ajaxOptions, thrownError) {
					toastr.error("操作失败");
	            }
			})
		}
	}
</script>
